<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div class="gradeTitle_0313">
          <p class="pTitle_0313">行家话题: 企业培训、公司文化建立</p>
          <p class="pType_0313">一对一约见：¥200</p>
        </div>
        <div class="progress_0313">
          <myProgress :level="level"></myProgress>
        </div>
        <div class="gradeContent_0313">
          <p class="contentTitle_0313">评价一下这次约见（20-300字）<span>*</span></p>
          <textarea class="ctTextarea_0313" placeholder="详细描述这次约见的感受，我们会继续改进"></textarea>
        </div>
        <div class="starsWrap_0313">
          <p class="starTitle_0313">感谢你的约见！请对这次的见面进行评价！</p>
          <div class="myStar_0314">
            <myStar @changeStar="starNum"></myStar>
          </div>
           <p class="starTitle_0313">对李元的印象（最多三个）：</p>
           <div class="labelWarp_0314">
             <span class="span_0314">全栈大师</span>
             <span class="span_0314">通俗易懂</span>
             <span class="span_0314">受益匪浅</span>
             <span class="span_0314">添加标签+</span>
           </div>
        </div>
        <div class="isName_0314">
          <span class="name_0314">匿名评价</span>
          <mt-switch v-model="value"></mt-switch>
        </div>
        <button class="sendButton_0314">提交评价</button>
        <button class="sendButton_0314 callServe_0314">联系客服</button>
      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import myProgress from './base/myProgress';
import myStar from './base/myStar';
import { Switch } from 'mint-ui';
export default {
  data () {
    return {
      myObj: {
        type: 5,
        text: '约见详情'
      },
      level: 3,
      value: ''
      
    }
  },
  methods: {
    events(i){
      if( i == 2) {
        history.back();
      }
    },
    starNum(i) {
      console.log(i);
    }
  },
  components: {
    myHeader,
    myProgress,
    myStar,
    "mt-switch":Switch
  }
}

</script>
<style>
.isName_0314 .mint-switch-input:checked + .mint-switch-core {
    border-color: #557AFF;
    background-color: #557AFF;
}
</style>

<style lang="less">
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    .callServe_0314 {
      border: .01rem solid #39393D!important;
      background: none!important;
      color: #39393D!important;
     

    }
    .sendButton_0314 {
      width: 3.35rem;
      height: .47rem;
      display: block;
      border: none;
      background: #557AFF;
      color: white;
      font-size: .18rem;
      border-radius: .05rem;
      margin: 0 auto .14rem;
    }
    .isName_0314 {
      width: 100%;
      height: .44rem;
      padding: 0 .15rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      margin-bottom: .35rem;
      .name_0314 {
        color: #000;
        font-size: .17rem;
      }
    }
    .starsWrap_0313 {
      .labelWarp_0314 {
        overflow: hidden;
        padding-top: .08rem;
        .span_0314 {
          display: block;
          float: left;
          height: .3rem;
          line-height: .3rem;
          font-size: .14rem;
          color: white;
          padding: 0 .1rem;
          border-radius: .04rem;
          background: #828282;
          margin: 0 .3rem .3rem 0;
        }

      }
      padding: .11rem .14rem;
      .starTitle_0313 {
        font-size: .16rem;
        color: #39393D;
      }
      .myStar_0314 {
        padding: .13rem 0 .25rem;
      }
      
    }
    .gradeContent_0313 {
      width: 3.75rem;
      height: 1.61rem;
      background: white;
      padding: .15rem;
      box-sizing: border-box;
        .ctTextarea_0313 {
          width: 100%;
          height: 1rem;
          display: block;
          color: #828282;
          font-size: .14rem;
          border: none;
        }
      .contentTitle_0313 {
        font-size: .14rem;
        padding-bottom: .24rem;
        font-weight: 500;
        span {
          color: #557AFF;
        }
      }
    }
    .progress_0313 {
      padding-bottom: .03rem;
    }
    .gradeTitle_0313 {
      width: 100%;
      height: .82rem;
      background: #FAFAFA;
      .pTitle_0313 {
        font-size: .16rem;
        color:#555555;
        text-align: center;
        padding: .19rem 0 .14rem;
      }
      .pType_0313 {
        font-size: .18rem;
        color: #39393D;
        text-align: center;
        font-weight: bold;
      }

    }
  }
}
  
</style>
